<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Learn 2 Beat Machine </title>
    <link rel="stylesheet" href="/static/v2/css/base/key.css">
</head>

<body>

<div class="key-wrapper">

    <h2><span>点击我</span> 让焦点到本页面后，键盘输入查看效果</h2>

    <ul>
        <li class="drum" data-key="1" data-code="49">1</li>
        <li class="drum" data-key="2" data-code="50">2</li>
        <li class="drum" data-key="3" data-code="51">3</li>
        <li class="drum" data-key="4" data-code="52">4</li>
        <li class="synth" data-key="5" data-code="53">a♩</li>
        <li class="synth" data-key="6" data-code="54">b♩</li>
        <li class="synth" data-key="7" data-code="55">c♩</li>
        <li class="synth" data-key="8" data-code="56">d♩</li>
        <li class="synth" data-key="9" data-code="57">e♩</li>
        <li class="synth" data-key="0" data-code="48">f♩</li>
        <li class="synth" data-key="-" data-code="173">g♩</li>
    </ul>

    <ul>
        <li class="drum" data-key="q" data-code="81">q</li>
        <li class="drum" data-key="w" data-code="87">w</li>
        <li class="drum" data-key="e" data-code="69">e</li>
        <li class="drum" data-key="r" data-code="82">r</li>
        <li class="" data-key="t" data-code="84">t</li>
        <li class="bass" data-key="y" data-code="89">y</li>
        <li class="bass" data-key="u" data-code="85">u</li>
        <li class="pad" data-key="i" data-code="73">i</li>
        <li class="pad" data-key="o" data-code="79">o</li>
        <li class="pad" data-key="p" data-code="80">p</li>
    </ul>

    <ul>
        <li class="drum" data-key="a" data-code="65">a</li>
        <li class="drum" data-key="s" data-code="83">s</li>
        <li class="drum" data-key="d" data-code="68">d</li>
        <li class="drum" data-key="f" data-code="70">f</li>
        <li class="" data-key="g" data-code="71">g</li>
        <li class="bass" data-key="h" data-code="72">h</li>
        <li class="bass" data-key="j" data-code="74">j</li>
        <li class="loop" data-key="k" data-code="75">k</li>
        <li class="loop" data-key="l" data-code="76">l</li>
    </ul>

    <ul>
        <li class="drum" data-key="z" data-code="90">z</li>
        <li class="drum" data-key="x" data-code="88">x</li>
        <li class="drum" data-key="c" data-code="67">c</li>
        <li class="drum" data-key="v" data-code="86">v</li>
        <li class="" data-key="b" data-code="66">b</li>
        <li class="" data-key="n" data-code="78">n</li>
        <li class="loop" data-key="m" data-code="77">m</li>
        <li class="loop" data-key="," data-code="188">,</li>
    </ul>

    <ul>
        <li class="effect" data-key="SPACE" data-code="32">SPACE</li>
    </ul>

</div>

<script src="/static/v0/js/jquery.min.js"></script>
<script src="/static/v2/js/key.js"></script>

</body>
</html>
